<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      @returnBack="$emit('returnModify')"
    >
      <template v-slot:full-button>
        <el-button @click="save()">保存</el-button>
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>计量器具信息</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <PageForm
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :disabled="formInfo.disabled"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
          >
            <template v-slot:form-verificationDate>
              <el-date-picker
                v-model="formInfo.data.verificationDate"
                value-format="YYYY-MM-DD"
                :disabled-date="checkTimePickerOptions.disabledDate"
              />
            </template>

            <template v-slot:form-filePathList>
              <UploadImg
                v-model:value="formInfo.data.filePathList"
                :action="action"
                list-type="text"
                title="附件"
                :file-type="fileType"
                :response-fn="handleResponse"
              />
            </template>
          </PageForm>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>计量结果信息</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <PageForm
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :disabled="formInfo.disabled"
            :data="formInfo.data"
            :field-list="formInfo.fieldListRes"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
          >
            <template v-slot:form-verificationDate>
              <el-date-picker
                v-model="formInfo.data.verificationDate"
                value-format="YYYY-MM-DD"
                :disabled-date="checkTimePickerOptions.disabledDate"
              />
            </template>

            <template v-slot:form-filePathList>
              <UploadImg
                v-model:value="formInfo.data.filePathList"
                :action="action"
                list-type="text"
                title="附件"
                :file-type="fileType"
                :response-fn="handleResponse"
              />
            </template>
          </PageForm>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="assetInstrumentsPlanModifg">
import {
  createMeasuringVerificationRecord,
  getMeasuringVerificationTaskById,
} from '@/api/quality.js'
import axios from 'axios'
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'title', 'planId'])
//表单相关
const checkTimePickerOptions = ref({
  disabledDate: (time) => {
    return (
      time.getTime() <
      new Date(formInfo.value.data.preVerificationDate).getTime()
    )
  },
})
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: '器具名称',
      value: 'commonName',
      type: 'input',
      disabled: true,
    },
    { label: '器具编码', value: 'code', type: 'input', disabled: true },
    {
      label: '是否强检',
      value: 'isMandatoryInspectionValue',
      type: 'select-model',
      code: 'yes_or_no',
      disabled: true,
    },
    {
      label: '资产名称',
      value: 'assetName',
      type: 'input',
      disabled: true,
    },
    {
      label: '资产卡片号',
      value: 'assetCode',
      type: 'input',
      disabled: true,
    },
    {
      label: '规格',
      value: 'standard',
      type: 'input',
      disabled: true,
    },
  ],
  fieldListRes: [
    {
      label: '检定日期',
      value: 'verificationDate',
      type: 'slot',
      placeholder: false,
    },
    {
      label: '证书编号',
      value: 'verificationCertificateNumber',
      type: 'input',
      maxlength: 32,
    },
    {
      label: '检定类型',
      value: 'verificationType',
      type: 'select-model',
      code: 'verification_type',
      checkDefault: true,
    },
    {
      label: '检定结果',
      value: 'verificationResult',
      type: 'select-model',
      code: 'verification_result',
      checkDefault: true,
    },
    {
      label: '检定单位',
      value: 'verificationUnit',
      type: 'input',
      maxlength: 200,
    },
    {
      label: '上传附件',
      value: 'filePathList',
      type: 'slot',
      className: 'not-br',
    },
  ],
  rules: {
    verificationDate: [
      { required: true, message: '请选择检定日期', trigger: 'change' },
    ],
    verificationCertificateNumber: [
      { required: true, message: '请输入证书编号', trigger: 'blur' },
    ],
    verificationUnit: [
      { required: true, message: '请输入检定单位', trigger: 'blur' },
    ],
  },
  labelWidth: '120px',
})

const action = ref(axios.defaults.baseURL + '/pub/uploadfile')
const fileType = ref(['docx', 'pdf', 'doc'])
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})
//保存
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      let data = formInfo.value.data
      data['taskId'] = props.planId
      createMeasuringVerificationRecord(data).then((resp) => {
        if (resp && resp.success) {
          showDialog.value = false
          formInfo.value.ref.validateField()
          proxy.$emit('returnModify', false)
        }
      })
    }
  })
}
//选择供应商

function getMain() {
  getMeasuringVerificationTaskById(props.planId).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
    }
  })
}
function handleResponse(response, file) {
  return file
}
onMounted(() => {
  if (props.planId) {
    getMain()
  }
})
</script>

<style scoped></style>
